<template>
  <div class="online-message">
    <div class="title">在线留言</div>
    <div class="details">
      <Form ref="formValidate" label-position="right" :label-width="100" style="width: 390px" :model="formValidate"
            :rules="ruleValidate">
        <FormItem label="留言内容" prop="msg">
          <Input type="textarea" :autosize="{minRows: 6,maxRows: 10}" v-model="formValidate.msg"></Input>
        </FormItem>
        <FormItem label="姓名" prop="name">
          <Input v-model="formValidate.name"></Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
          <RadioGroup v-model="formValidate.gender">
            <Radio label="male">男</Radio>
            <Radio label="female">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="手机" prop="phone">
          <Input v-model="formValidate.phone"></Input>
        </FormItem>
        <FormItem label="电话" prop="telephone">
          <Input v-model="formValidate.telephone"></Input>
        </FormItem>
        <FormItem label="传真" prop="fax">
          <Input v-model="formValidate.fax"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="Email">
          <Input v-model="formValidate.Email"></Input>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Input v-model="formValidate.address"></Input>
        </FormItem>
        <FormItem label="邮编" prop="postalCode">
          <Input v-model="formValidate.postalCode"></Input>
        </FormItem>
        <FormItem>
          <Button type="default" @click="submitBtn('formValidate')">提交</Button>
        </FormItem>
      </Form>
    </div>


  </div>
</template>

<script>
  export default {
    name: "online-message",
    data() {
      return {
        formValidate: {
          msg: '',
          name: '',
          gender: 'male',
          phone: '',
          telephone: '',
          fax: '',
          Email: '',
          address: '',
          postalCode: '',
        },
        ruleValidate: {
          msg: [
            {required: true, type: 'string', message: '请填写您的留言', trigger: 'blur'}
          ],
          name: [
            {required: true, type: 'string', message: '请填写您的名字', trigger: 'blur',}
          ],
          gender: [
            {trigger: 'change',},
          ],
          phone: [
            {required: true, message: '请填写您的手机号码', trigger: 'blur',},
            {
              type: 'number', message: '请输入数字格式', trigger: 'blur', transform(value) {
                return Number(value);
              }
            }
          ],
          telephone: [
            {type: 'string', trigger: 'blur',}
          ],
          fax: [
            {type: 'string', message: '', trigger: 'blur',},
          ],
          Email: [
            {type: 'email', message: 'eeee', trigger: 'blur',},
          ],
          address: [
            {type: 'string', message: '', trigger: 'blur',},
          ],
          postalCode: [
            {type: 'string', message: '', trigger: 'blur',}
          ],
        }
      }
    },
    methods: {
      submitBtn(name) {
        // console.log(this.$refs[name].model);
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!');
            this.$refs[name].resetFields();
          } else {
            this.$Message.error('提交失败!');
          }
        })
      },
    },
  }
</script>

<style scoped lang="less">
  .online-message {
    padding: 30px 80px 20px 80px;
    .title {
      width: 120px;
      height: 40px;
      line-height: 40px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
    }
    .details {
      border: 2px solid #ccc;
      padding: 72px 0 40px 100px;
      span {
        display: inline-block;
        height: 100%;
        width: 30%;
        cursor: pointer;
      }

    }
  }

</style>

<style>
  @import "onlinaMessage.css";
</style>
